import React, { useEffect, useMemo, useRef, useState } from "react";

interface PropsType {
  message: string;
}

const Index: React.FC<PropsType> = (props) => {
  const [num, setNum] = useState(() => {
    return 1;
  });
	const [count, setCount] = useState(123) 

	const douNum = useMemo(() => {
		console.log('代码执行了')
		// 它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算。
		return num * 2
	}, [num])

	const h1 = useRef<HTMLHeadingElement  | null>(null)
	useEffect(() => {
		// 改变 DOM、添加订阅、设置定时器、记录日志以及执行其他包含副作用
		
		// const timer = setInterval(() => {
		// 	console.log(123)
		// }, 100)

		// return () => {
		// 	// 销毁组件时候 该函数执行
		// 	clearInterval(timer)
		// }
		console.log(h1.current)
	}, [num])

  return (
    <div>
      <h1>函数组件--{props.message}</h1>
			<h2>{ num }</h2>
			<h3>{ douNum }</h3>
			<h1 ref={ h1 }>{ count }</h1>
      <button onClick={() => setNum(num - 1)}>-1</button>
      <button onClick={() => setNum((prevState) => prevState + 1)}>+1</button>
			<button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
};

export const FuncComp = Index;
